export const addSideBar = (editor) => {
    const {
        Components
    } = editor;
Components.addType('sidebar-item', {  
    model: {  
      defaults: {  
        // 组件的默认属性  
        tagName: 'div',  
        draggable: true,  
        droppable: true,  
        attributes: {
          'data-gjs-type':'sidebar-item'
        },
        components: `
                       <ul class="gjs-blocks-categories">  
            <li data-gjs-type="category" data-gjs-id="category-basic">  
              <span>Basic</span>  
              <ul>  
                <li data-gjs-type="text" data-gjs-label="Text">  
                  <i class="fa fa-font"></i> Text  
                </li>  
                <li data-gjs-type="image" data-gjs-label="Image">  
                  <i class="fa fa-image"></i> Image  
                </li>  
              </ul>  
            </li>  
            <!-- 可以继续添加更多类别和子项 -->  
          </ul>  
                    `,  
        // 可以添加更多自定义属性  
      },  
      script(){
        const newCategory = document.createElement('li');  
        newCategory.setAttribute('data-gjs-type', 'category');  
        newCategory.setAttribute('data-gjs-id', 'category-custom');  
        newCategory.innerHTML = `<span>Custom</span><ul><li data-gjs-type="custom-component" data-gjs-label="Custom Component"><i class="fa fa-puzzle-piece"></i> Custom</li></ul>`;  
        editor.Panels.getPanel('blocks').add(newCategory);  
      },
    },  
    view: {  
      // 自定义视图逻辑，如渲染子组件等  
    },  
  });  
    
  // 将自定义组件添加到块管理器中（可选）  
  editor.BlockManager.add('sidebar-item', {  
    label: '侧边栏',  
    category: '其他类',  
    media: `<svg t="1721997020165" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6763" width="30" height="30"><path d="M0 39.07584h1024v158.3104H0v-158.3104zM0 433.84832h865.71008v158.3104H0v-158.3104zM0 826.61376h1024v158.28992H0v-158.28992z" p-id="6764"></path></svg>`,
    content: {  
      type: 'sidebar-item',  
    },  
  });
}